<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字滚动效果js实现</title>
    <style>

        * {
            box-sizing: border-box;
        }

        .container {
            background-color: purple;
            height: 60px;
            display: flex;
            padding: 16px 10px;
        }

        .container div:first-child {
            border-right: 4px solid red;
            padding-right: 20px;
            line-height: 28px;
            height: 28px;
        }

        ul {
            margin: 0;
            overflow: hidden;
        }

        li {
            padding: 0;
            font-size: 30px;
            list-style: none; /*去除list 前面符号**/
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div class="container">
    <div>Your say</div>
    <ul>
        <li>Please</li>
        <li>Drink</li>
        <li>Me</li>
    </ul>
</div>

<script>

    (function () {
        const list = document.querySelector('ul')
        const clientHeight = list.children[0].clientHeight
        const scrollSpeed = 400
        const scrollInterval = 10
        let currentIndex = 0

        function copyNode() {
            const node = list.children[0].cloneNode(true) // 参数为true,表示为深度克隆
            list.appendChild(node)
        }

        // 开始滚动
        function startScroll() {

            let from = currentIndex * clientHeight
            currentIndex++
            const to = currentIndex * clientHeight
            const scrollF = scrollSpeed / scrollInterval // 单位滚动时间内的滚动频率
            const diff = clientHeight / scrollF // 单位滚动时间内的滚动变化量
            const timeId = setInterval(function () {
                from += diff
                // 判断是否到达下一节点距离
                if (from >= to) {
                    clearInterval(timeId)
                    // 判断是否到达最终节点距离
                    if (currentIndex >= list.children.length - 1) {
                        from = 0
                        currentIndex = 0
                    }
                }
                list.scrollTop = from
            }, scrollInterval)
        }

        copyNode()
        // 每隔1s执行一次滚动
        setInterval(startScroll, 2000)
    })()


</script>
</body>
</html>